<script setup>
import { reactive, ref, onMounted } from 'vue'
import { addUser, updateUser } from '@/api/rsgl'
import ChannelSelect from './ChannelSelect.vue'
const emit = defineEmits(['flush'])
// 表单数据
const formData = ref({
  id: 0,
  empName: '',
  workCode: '',
  entryTime: '',
  phone: '',
  deptName: ''
})

onMounted(() => {})
// 表单验证
const formRules = reactive({
  empName: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' }
    // { min: 2, max: 10, message: '请输入2~10个字符', trigger: 'blur' }
  ],
  workCode: [
    { required: true, message: '请输入员工编号', trigger: 'blur' }
    // { min: 2, max: 6, message: '请输入2~6个字符', trigger: 'blur' }
  ],
  deptName: [{ required: true, message: '请选择部门', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' }
    // { validator: checkMobile, trigger: 'blur' }
  ],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  entryTime: [{ required: true, message: '请选择入职时间', trigger: 'blur' }]
  // password: [
  //   { validator: checkPassword, message: '请输入6~12个字符', trigger: 'blur' }
  //   // { required: true, message: '请输入密码', trigger: 'blur' },
  //   // { min: 6, max: 12, message: '请输入6~12个字符', trigger: 'blur' }
  // ],
})
// 提交验证
const formRef = ref()
const onSubmit = () => {
  formRef.value.validate(async (isSuccess) => {
    if (isSuccess) {
      //请求接口
      let r
      console.log('formData.value.id', formData.value.id)
      if (formData.value.id > 0) {
        //修改
        r = await updateUser(formData.value)
      } else {
        //新增
        r = await addUser(formData.value)
      }
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        state.value = false
        //调用父组件的函数，实现列表刷新
        emit('flush')
        onReset
      } else {
        ElMessage({ type: 'error', message: '操作失败' })
      }
    }
  })
}
const onReset = () => {
  formRef.value.resetFields()
  emit('flush')
}

// 对话框状态
const state = ref(false)

//取得角色数据
// const options = ref([])
// const getRoleListData = async () => {
//   const r = await getRoleList()
//   options.value = r.data.list
// }
// 暴露
defineExpose({
  state,
  formData
})
</script>
<template>
  <el-dialog
    v-model="state"
    :title="`${formData.id ? '修改' : '添加'}员工`"
    width="650"
    :before-close="() => (state = false)"
  >
    <!-- 内容 -->
    <el-form
      v-if="state"
      size="large"
      label-width="80"
      :model="formData"
      :rules="formRules"
      ref="formRef"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="empName">
            <el-input placeholder="请输入姓名" v-model="formData.empName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工编号" prop="workCode">
            <el-input
              placeholder="请输入员工编号"
              v-model="formData.workCode"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="部门" prop="deptName">
            <channel-select
              v-model="formData.deptName"
              width="100%"
            ></channel-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手  机  号" prop="phone">
            <el-input placeholder="请输手机号" v-model="formData.phone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-select
              placeholder="请选择性别"
              v-model="formData.gender"
              style="width: 250px"
            >
              <el-option
                v-for="item in [
                  {

                    value: 1,
                  label: '男'
                  },
                  {
                    value: 2,
                    label: '女'
                  }
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职时间" prop="entryTime">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="formData.entryTime"
              type="date"
              placeholder="请选择入职时间"
              value-format="YYYY-MM-DD"
              style="width: 250px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="default" @click="state = false">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
  </el-dialog>
</template>
